<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>配船卸船</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model ref="form" :model="form" layout="inline">
        <a-form-model-item label="船名" prop="shipId">
          <a-select v-model="form.shipId" style="width:180px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option v-for="(v,k) in shipNameList" :key="k" :value="v.id">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="航次" prop="voyageNumberLike">
          <a-input v-model="form.voyageNumberLike" />
        </a-form-model-item>
        <a-form-model-item label="起航日期">
          <a-range-picker @change="onChange" :value="timeValue">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="tableData"
        class="tableMargin"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="name" slot-scope="record">
          <a @click="nameDetail(record)">{{record.shipName}}</a>
        </template>
        <template slot="voyage" slot-scope="record">
          <a @click="voyageDetail(record)">{{record.voyageNumber}}</a>
        </template>
        <template slot="action" slot-scope="record">
          <a @click="shipAction(record)">配船卸船</a>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { queryShipNameList } from '@/api'
import { queryShipContainerList } from '@/api/orderCenter'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    scopedSlots: {
      customRender: 'name'
    }
  },
  {
    title: '航次',
    scopedSlots: {
      customRender: 'voyage'
    }
  },
  {
    title: '航线',
    dataIndex: 'routeName'
  },
  {
    title: '装载量',
    customRender: (record) => {
      return `${record.loadingCapacity} TEU`
    }
  },
  {
    title: '当前已装载量',
    customRender: (record) => {
      return `${record.currentLoadingCapacity} TEU`
    }
  },
  {
    title: '起航日期',
    dataIndex: 'departureDate'
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action'
    }
  }
]
export default {
  data () {
    return {
      shipNameList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      form: {
        voyageNumberLike: '',
        shipId: '',
        startDate: '',
        endDate: ''
      },
      columns,
      tableData: [],
      pagination: {},
      btnControl: {},
      timeValue: []
    }
  },
  methods: {
    shipNameListRequest (e) {
      queryShipNameList(e)
        .then(res => {
          this.shipNameList = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      this.loading = true
      queryShipContainerList(e)
        .then(res => {
          // // console.log(res.data.list)
          this.tableData = res.data.list
          let currentPage = this.pageNum
          this.$route.meta.s = e
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            pageSizeOptions: ['10', '30', '50', '100', '500'],
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    onChange (date, dateString) {
      this.timeValue = date
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.pageSize = 10
      this.containerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    nameDetail (e) {
      window.open(`/shipCenter/shipManagement/detail/${e.shipId}`, '_blank')
    },
    voyageDetail (e) {
      window.open(`/shipCenter/voyageManagement/detail/${e.voyageId}`, '_blank')
    },
    shipAction (e) {
      // if (!this.btnControl.shipment) {
      //   this.$message.error('您无此权限！')
      //   return false
      // }
      this.$router.push({'path': `/orderCenter/shipLoading/detail/${e.voyageId}`})
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // // console.log(this.$root._bc)
    })
    this.shipNameListRequest({
      status: 1
    })
    let originObj = this.$route.meta.s
    this.listAssign(this.form, originObj)
    console.log(originObj)
    if (originObj) {
      this.pageSize = originObj.pageSize
      this.pageNum = originObj.pageNum
      this.form.startDate = originObj.startDate
      this.form.endDate = originObj.endDate
      if (originObj.startDate) {
        this.timeValue = [moment(originObj.startDate), moment(originObj.endDate)]
      } else {
        this.timeValue = []
      }
    }
    this.containerListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  },
  beforeRouteEnter (to, from, next) {
    if (from.name !== 'orderShipLoadingDetail' || to.query.f !== '1') {
      to.meta.s = null
    }
    next()
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
